<script setup lang="ts">
function onClickLeft() {
    history.back()
}
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
import { getdetailFn } from '@/api/sort'
import { cartListFn } from '@/api/cart'
import { computed, onMounted, ref } from 'vue';
import type { Ref } from 'vue';
import type { iPro } from '@/types/homeType';

console.log(2000000000, window);//去拿到点击的商品的的proid
console.log(11111, route.query.proid);//去拿到点击的商品的的proid

const detailList: Ref<iPro | null> = ref(null)
getdetailFn({ proid: String(route.query.proid) }).then(res => {
    console.log(616, res);
    detailList.value = res.data
})
/**  老师的代码
 * 或者说用reactive去定义变量
 * const state:{detail:iPro}=reactive({
 *  detail:{}
 * })
 * onMounted(()=>{
 *    getDetailDataFn(String(route.query.proid)).then(res => {
        // console.log(res.data);
        res.data.banners = res.data.banners[0].split(',')
        setTimeout(() => {
            state.detail = res.data
        }, 300);
    })
 * })
 */
const banners = computed(() => {
    return detailList.value?.banners[0].split(',') || []
})
const discountPrice = computed(() => {
    return detailList.value ? (detailList.value.discount) * (detailList.value.originprice) * 0.1 : 0
})
const skeletonState: Ref<boolean> = ref(true)
import detailCom from '@/components/detailCom.vue';
onMounted(() => {

    setTimeout(() => {
        skeletonState.value = false
    }, 100)
})
//——————————————————————————————留言  打开聊天 用的美洽 第三方平台 工作实际中会是直接买人家第三方的客服平台源码然后用自己公司服务器确保数据的隐私
function commentsClick() {
    //传递顾客信息--注册账号的时候用户自己登录设置的信息 然后客服都可以看到我们的信息
    window._MEIQIA('metadata', {
        address: '浙江金华婺城区金华之心3区12楼', // 地址
        age: '18', // 年龄
        comment: '有钱',// 备注
        email: 'xgreen@163.com', // 邮箱
        gender: '男', // 性别
        name: '林杨', // 名字
        qq: '3265898741',// QQ
        tel: '18314771477',// 电话
        weibo: '18888888888', // 微博
        weixin: '18888888888', // 微信
        contact: '无', // 联系人
    })
    // console.log(window)
    window._MEIQIA('showPanel');
}
//——————————————————————————————加入购物车
import { addCart } from '@/api/cart';
import { showToast } from 'vant';

import { useUserStore } from '@/stores/user';
// 在 pinia 中获取用户数据
const user = useUserStore()
//————————————————————————————获取购物车数量 有bug 老师的也是
const count: Ref<number> = ref(0)
cartListFn({ userid: user.userid, header: { token: user.token } }).then(res => {
    // console.log('获取购物车数量显示到角标', res);
    count.value = res.data.length

})
function addCartClick() {
    // console.log({
    //     proid: route.query.proid,

    //     userid: user.userid,
    //     num: 1
    // });
    if (user.isLogin) {
        addCart({
            proid: String(route.query.proid),
            userid: user.userid,
            num: 1,
        }).then(res => {
            console.log(88, res);
            if (res.data.code == 200) {
                showToast(res.data.message)
                cartListFn({ userid: user.userid, header: { token: user.token } }).then(res => {
                    // console.log('获取购物车数量显示到角标', res);
                    count.value = res.data.length

                })

            } else {
                // showToast(res.message)
                cartListFn({ userid: user.userid, header: { token: user.token } }).then(res => {
                    // console.log('获取购物车数量显示到角标', res);
                    count.value = res.data.length

                })
            }
        })
    } else {
        router.push({
            path:'/login',
            query:{
                type:'back'
            }
        })
    }


}
//加入购物车
function goCart() {
    if (user.isLogin) {
        router.push('/cart')
    } else {
        router.push({
            path:'/login',
            query:{
                type:'back'
            }
        })
    }
}


</script>
<template>
    <van-nav-bar title="头部——详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-skeleton :loading="skeletonState" class="skeleton">
        <template #template>
            <div :style="{ width: '100%' }">
                骨架屏 数据加载中····
                <van-skeleton-image style="width: 100%;height: 100%;padding: 20px;box-sizing: border-box;" />
                <div :style="{ flex: 1, marginTop: '16px' }">
                    <van-skeleton-paragraph row-width="60%" />
                    <van-skeleton-paragraph />
                    <van-skeleton-paragraph />
                    <van-skeleton-paragraph />
                </div>
            </div>
        </template>
        <detailCom :detailList="detailList" :discountPrice="discountPrice" :banners="banners"></detailCom>
    </van-skeleton>

    <van-action-bar>
        <van-action-bar-icon @click="commentsClick" icon="chat-o" text="客服" dot />
        <van-action-bar-icon icon="cart-o" @click="goCart" text="购物车" :badge="count" />
        <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
        <van-action-bar-button @click="addCartClick" type="warning" text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>


</template>
<style lang="scss">
.skeleton {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    // padding: 10px;
    box-sizing: border-box;
}

.custom-indicator {
    position: absolute;
    right: 0px;
    bottom: 5px;
    padding: 5px 10px;
    font-size: 16px;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    border-radius: .625rem 0 0 .625rem;
}
</style>